<template>
  <div class="admin-sidebar" :class="{ 'is-collapse': isCollapse }">
    <el-menu
      router
      :default-active="activeMenu"
      class="admin-menu"
      :collapse="isCollapse"
      background-color="transparent"
      text-color="#fff"
      active-text-color="#409EFF"
    >
    <slot name="menu"></slot>
    </el-menu>

    <div class="collapse-btn" @click="toggleCollapse">
      <el-icon :size="20">
        <component :is="isCollapse ? 'Expand' : 'Fold'" />
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import {
  DataLine,
  User,
  Setting,
  Picture,
  Document,
  Monitor,
  Fold,
  Expand
} from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = ref(route.path)
const isCollapse = ref(false)

onMounted(() => {
  activeMenu.value = route.path
})

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<style scoped>
.admin-sidebar {
  width: 240px;
  height: 100%;
  background: linear-gradient(180deg, #1d39c4 0%, #096dd9 100%);
  position: relative;
  transition: all 0.3s;
}

.admin-sidebar.is-collapse {
  width: 64px;
}

.admin-menu {
  border: none;
  padding: 10px 0;
  width: 100%;
}

.el-menu-item {
  height: 56px;
  line-height: 56px;
  margin: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s;
}

.el-menu-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.el-menu-item.is-active {
  background: #1890ff !important;
  color: #fff !important;
}

.el-menu-item .el-icon {
  font-size: 18px;
  margin-right: 10px;
  vertical-align: middle;
}

.collapse-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  transition: all 0.3s;
}

.collapse-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 折叠状态样式 */
.admin-menu.el-menu--collapse {
  width: 100%;
}

.admin-menu.el-menu--collapse .el-menu-item {
  margin: 8px 12px;
}

:deep(.el-menu--collapse) .el-menu-item span {
  display: none;
}
</style>